// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use '../utils' as f3;
@import '~@mozilla-protocol/core/protocol/css/includes/lib';

.c-agreement {
    @include f3.section-divider;
    background-color: $color-violet-60; /* darker bg needed for accessible color contrast */
    color: f3.$white;

    h3 {
        color: f3.$white;
    }

    svg {
        display: block;
        max-width: 100%;
        height: auto;
    }

    .c-module-tag {
        margin-bottom: $spacing-md;
    }

    .c-module-tag-title {
        @include f3.no-topic;
    }

    .c-content p,
    svg {
        margin-bottom: $layout-sm;
    }

    .c-subtitle {
        margin-bottom: $layout-xs;
    }

    .mzp-l-content {
        text-align: center;
    }

    .c-subtitle,
    p {
        text-align: left;
    }
}

.c-download {
    @include f3.button;
    @include text-body-md; // match Download Fx CTA font size
}

@media #{$mq-sm} {
    .c-agreement {
        .l-grid {
            > * {
                max-width: 500px;
                margin-right: auto;
                margin-left: auto;
            }
        }
    }
}

@supports (display: grid) {
    @media #{$mq-lg} {
        .c-agreement {
            .mzp-l-content {
                text-align: unset;
            }

            .l-grid {
                align-content: center;
                column-gap: $layout-md;
                display: grid;
                grid-template-columns: repeat(2, 1fr);

                > * {
                    margin-right: unset;
                    margin-left: unset;
                }
            }

            .c-module-tag {
                grid-column-start: 1;
                grid-row-start: 1;
                place-self: start;
            }

            .c-content {
                grid-column-start: 1;
                grid-row-start: 2;
                max-width: 40ch;
            }

            svg {
                grid-column-start: 2;
                grid-row: 1 / span 2;
                margin-bottom: 0;
                place-self: start;
            }
        }
    }
}

.js {
    @media (prefers-reduced-motion: no-preference) {
        $checkmark-duration: 0.5s;

        [class^='checkmark'] {
            stroke-dasharray: 30;
            stroke-dashoffset: 30;
        }

        .animate-checkmark {
            animation: $checkmark-duration ease-in 0s 1 forwards normal running draw-checkmark;

            @keyframes draw-checkmark {
                from {
                    stroke-dashoffset: 30;
                }

                to {
                    stroke-dashoffset: 0;
                }
            }
        }

        // svg coordinates for checkboxes
        $top-row: 222px;
        $bottom-row: 319px;
        $first-col: 197px;
        $second-col: 373px;

        // duration for delay calculations
        $total-animation-duration: calc(#{f3.$animation-duration} + #{$checkmark-duration});

        .has-animation {
            opacity: 0;
        }

        .animate-pop-in {
            &[data-order='1'] {
                transform-origin: $first-col $top-row;
            }

            &[data-order='2'] {
                transform-origin: $second-col $top-row;
                animation-delay: calc(1 * #{$total-animation-duration});
            }

            &[data-order='3'] {
                transform-origin: $first-col $bottom-row;
                animation-delay: calc(2 * #{$total-animation-duration});
            }

            &[data-order='4'] {
                transform-origin: $second-col $bottom-row;
                animation-delay: calc(3 * #{$total-animation-duration});
            }
        }
    }
}
